body {
    margin: 0;
    padding: 0;
}

#map {
    width: 100%;
    height: 100vh;
}

/**
 * Leaflet
 */
.leaflet-bar a {
    color: white;
    background: rgba(54, 57, 67, .7);
    cursor: pointer;
    border-bottom: 1px solid hsla(0, 0%, 81.2%, .5);
}

.leaflet-bar a:hover,
.leaflet-bar a:focus {
    background-color: rgba(54, 57, 67, .7);
}

/**
 * other
 */

.right-side-menu {
    width: 30;
    position: absolute;
    z-index: 1000;
    text-align: center;
    cursor: pointer;
    top: 50px;
    right:20px;
    text-align: left;
}

.menu-list {
    background: rgba(13, 25, 40, .48);
    border-radius: 100px;
    flex-direction: column;
    justify-content: center;

}

.menu-item {
    padding: 0;
    position: relative;
    cursor: pointer;
    display: block;
    margin-bottom: 8px;
    width: 30px;
    height: 30px;
    text-align: center;
}

.menu-item .menu-item-title {
    color: #363e45;
    font-size: 14px;
    position: absolute;
    right: 130%;
    text-align: right;
    white-space: nowrap;
    font-weight: 400;
    top: 0;
    padding: 6px 10px;
    border-radius: 100px;
}
.menu-item:hover .menu-item-title{
    background-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1); /* 放大元素 */
}
.menu-item .bg-circle{
    width: 30px;
    height: 30px;
    position: absolute;
}
.menu-item-img {
    width: 20px;
    height:20px;
    transition: all .3s ease;
    transform: scale(0.9);
    opacity: 1;
    margin-top: 5px;
}
.bg-circle:hover{
    transform: scale(1.1);
    border-radius: 100px;
}
.bg-circle-active {
    background-color:rgba(28, 179, 255, .94);
    transform: scale(1);
    border-radius: 100px;
}

/**
 * 图例
 */
 .legend {
    display: flex;
    align-items: flex-start; /* 对齐到顶部 */
    text-shadow: 0 0 10px rgb(0, 0, 0);
    white-space: nowrap;
    font-size: 12px;
    color: #fff;
    bottom: 80px;
    flex-direction: column; /* 改为垂直布局 */
}

.legend-unit {
    margin-bottom: 5px;
    margin-left: 10px;
    text-align: center;
    width: 100%;
}

.legend-bar-container {
    display: flex;
    align-items: center;
}

.temp-bar {
    width: 12px;
    height: 300px;
    border-radius: 10px;
    border: 1px solid white;
    box-shadow: 0 2px 12px #0000004d;
    background: linear-gradient(to bottom,
        rgba(37, 4, 42, .6) 0%,             
        rgba(41, 10, 130, .6) 11.11%,        
        rgba(81, 40, 40, .6) 22.22%,         
        rgba(192, 37, 149, .6) 33.33%,       
        rgba(70, 215, 215, .6) 44.44%,       
        rgba(21, 84, 187, .6) 55.56%,        
        rgba(24, 132, 14, .6) 66.67%,        
        rgba(247, 251, 59, .6) 77.78%,       
        rgba(235, 167, 21, .6) 88.89%,       
        rgba(230, 71, 39, .6) 100%,          
        rgba(88, 27, 67, .6) 100%);         
    position: relative;
}

.relative_humidity-bar {
    width: 12px;
    height: 300px;
    border-radius: 10px;
    border: 1px solid white;
    box-shadow: 0 2px 12px #0000004d;
    background: linear-gradient(to bottom,
        rgba(230, 165, 30, .6) 0%,      
        rgba(120, 100, 95, .6) 16.67%, 
        rgba(40, 44, 92, .6) 50%,      
        rgba(21, 13, 193, .6) 66.67%, 
        rgba(75, 63, 235, .6) 83.33%,  
        rgba(25, 255, 255, .6) 100%);  
    position: relative;
}
.precipitation-bar {
    width: 12px;
    height: 300px;
    border-radius: 10px;
    border: 1px solid white;
    box-shadow: 0 2px 12px #0000004d;
    background: linear-gradient(to bottom,
        rgba(117, 117, 117, .6) 0%,       
        rgba(91, 87, 137, .6) 7.14%,      
        rgba(73, 102, 170, .6) 14.29%,    
        rgba(70, 153, 171, .6) 21.43%,     
        rgba(83, 184, 100, .6) 28.57%,    
        rgba(145, 206, 76, .6) 35.71%,     
        rgba(206, 218, 62, .6) 42.86%,     
        rgba(220, 182, 64, .6) 50%,        
        rgba(219, 158, 69, .6) 57.14%,     
        rgba(217, 121, 77, .6) 64.29%,    
        rgba(210, 96, 95, .6) 71.43%,  
        rgba(179, 56, 103, .6) 78.57%,     
        rgba(147, 23, 78, .6) 85.71%,       
        rgba(84, 16, 41, .6) 100%);         
    position: relative;
}

.cloud_cover-bar {
    width: 12px;
    height: 300px;
    border-radius: 10px;
    border: 1px solid white;
    box-shadow: 0 2px 12px #0000004d;
    background: linear-gradient(to bottom,
        rgba(146, 130, 70, 1) 0%,      
        rgba(132, 119, 70, 1) 16.67%,  
        rgba(116, 116, 116, 1) 58.33%, 
        rgba(171, 180, 179, 1) 91.67%,  
        rgba(198, 201, 201, 1) 96.67%, 
        rgba(213, 213, 205, 1) 100%);  
    position: relative;
}

.pressure-bar {
    width: 12px;
    height: 300px;
    border-radius: 10px;
    border: 1px solid white;
    box-shadow: 0 2px 12px #0000004d;
    background: linear-gradient(to bottom,
        rgba(0, 90, 148, .9) 0%,         
        rgba(0, 117, 146, .9) 11.11%,   
        rgba(26, 140, 147, .9) 22.22%,   
        rgba(103, 162, 155, .9) 33.33%, 
        rgba(155, 183, 172, .9) 44.44%, 
        rgba(176, 174, 152, .9) 55.56%, 
        rgba(167, 147, 107, .9) 66.67%, 
        rgba(163, 116, 67, .9) 77.78%,   
        rgba(159, 81, 44, .9) 100%);     
    position: relative;
}
.wind_speed-bar {
    width: 12px;
    height: 300px;
    border-radius: 10px;
    border: 1px solid white;
    box-shadow: 0 2px 12px #0000004d;
    background: linear-gradient(to bottom,
        rgba(98, 113, 183, 1) 0%,           /* 对应 value: 0 */
        rgba(57, 97, 159, 1) 1.67%,         /* 对应 value: 1 */
        rgba(74, 148, 169, 1) 8.33%,        /* 对应 value: 5 */
        rgba(53, 159, 53, 1) 16.67%,        /* 对应 value: 10 */
        rgba(161, 108, 92, 1) 25%,          /* 对应 value: 15 */
        rgba(175, 80, 136, 1) 33.33%,       /* 对应 value: 20 */
        rgba(109, 97, 163, 1) 41.67%,       /* 对应 value: 25 */
        rgba(92, 144, 152, 1) 50%,          /* 对应 value: 30 */
        rgba(125, 68, 165, 1) 58.33%,       /* 对应 value: 35 */
        rgba(231, 215, 215, 1) 83.33%,      /* 对应 value: 50 */
        rgba(205, 202, 112, 1) 100%);       /* 对应 value: 60 */
    position: relative;
}
.pollutant_conc-bar {
    width: 12px;
    height: 300px;
    border-radius: 10px;
    border: 1px solid white;
    box-shadow: 0 2px 12px #0000004d;
    background: linear-gradient(to bottom,
        rgba(216,222,222, 1) 0%,            /* 对应 value: 0.0 */
        rgba(71, 75, 141, 1) 1.67%,         /* 对应 value: 0.01 */
        rgba(71, 75, 141, 1) 4.17%,         /* 对应 value: 0.05 */
        rgba(111, 187, 220, 1) 8.33%,       /* 对应 value: 0.1 */
        rgba(71, 101, 99, 1) 13.33%,        /* 对应 value: 0.2 */
        rgba(125, 180, 54, 1) 20%,          /* 对应 value: 0.5 */
        rgba(172, 200, 61, 1) 30%,          /* 对应 value: 1.0 */
        rgba(232, 231, 72, 1) 40%,          /* 对应 value: 2.0 */
        rgba(235, 183, 59, 1) 60%,          /* 对应 value: 5.0 */
        rgba(224, 101, 49, 1) 80%,          /* 对应 value: 10.0 */
        rgba(217, 67, 45, 1) 100%);         /* 对应 value: 50.0 */
    position: relative;
}
.legend-labels-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 300px;
}

.legend-label {
    position: relative;
    width: 25px;
    text-align: right;
}

/**
 * 时间轴
 */
#progressTime{
    position: fixed;
    left:10%;
    width: 80%;
    height: 80px;
    z-index: 9999;
    background-color:rgba(0,0,0,0.3);
}
#progressTime .timeInfo{
    position: absolute;
    right: 0;
    bottom: 190px;
    padding: 10px;
    border-radius: 6px;
    color: #fff;
    background: rgba(0,0,0,0.5);
    text-align: right;
  }